<template>
  <div class="layer gap-3 p-3">

    <div class="section">

      <div class="form-item-inline gap-2">
        <div class="title-flag bg-red-5"></div>
        <div class="title">基本信息</div>
      </div>

      <div @click="handleClickSelectDateTime">
        <xoFormNavigate label="预约时间段" placeholder="(必选项)选择" :content="newReservationModel.reservationDateTime.value"
          :ruleMessage="newReservationModel.reservationDateTime.ruleMessage"
          @onValid="newReservationModel.reservationDateTime.valid">
        </xoFormNavigate>
      </div>

      <xoFormInput label="预约人手机号" placeholder="(必填项)" type="number" :maxLength="11"
        :ruleMessage="newReservationModel.phone.ruleMessage" @onValid="newReservationModel.phone.valid"
        v-model="newReservationModel.phone.value" />

      <xoFormInput label="预约人姓名" placeholder="(必填项)" :ruleMessage="newReservationModel.name.ruleMessage"
        @onValid="newReservationModel.name.valid" v-model="newReservationModel.name.value" />

      <xoFormTab label="服务方式" :tabs="['到店', '上门']" v-model="newReservationModel.serviceType.value" />

      <xoFormTab label="优先级" :tabs="['一般', '重要', '加急']" v-model="newReservationModel.priority.value" />

    </div>

    <div class="section gap-0">

      <div class="form-item-inline justify-between">
        <div class="form-item-inline gap-2">
          <div class="title-flag"></div>
          <div class="title">其它信息</div>
        </div>
        <div class="form-item-inline justify-end" @click.stop="showMore = !showMore">
          <div class="text-emerald-5">{{ showMore ? '点击收起' : '点击显示' }}</div>
          <div :class="showMore ? 'arrow-up' : 'arrow-down'"></div>
        </div>
      </div>

      <xoVerticalExpand :class="showMore ? 'mt-3' : ''" :expand="showMore">

        <div class="form-item gap-3">

          <xoFormNavigate label="预约项目" placeholder="选择" v-model="newReservationModel.products.value" />

          <xoFormNavigate type="dropdown" label="预约店员" placeholder="选择" v-model="newReservationModel.employee.value" />

          <xoFormInput label="预约订金(元)" type="digit" v-model.number="newReservationModel.deposit.value" />

          <xoFormInput label="备注" type="text" v-model="newReservationModel.desc.value" />
        </div>

      </xoVerticalExpand>

    </div>

    <div class="grid grid-cols-4 gap-2 w-full">
      <div class="col-span-0 btn-default bg-white" @click="handleClickReset">重置</div>
      <div class="col-span-3 btn-primary" @click="handleClickSave">保存</div>
    </div>

  </div>
</template>

<script setup lang='ts'>

import xoFormInput from '@/components/xoUI/xoFormInput.vue';
import xoFormNavigate from '@/components/xoUI/xoFormNavigate.vue';
import xoFormTab from '@/components/xoUI/xoFormTab.vue';
import xoVerticalExpand from '@/components/xoUI/xoVerticalExpand.vue';

import dayjs from 'dayjs'
import useReservation, { type IProduct } from '@/hooks/useReservation';
import { ref } from 'vue';

const {
  newReservationModel,
  doValid,
  reset,
} = useReservation();

const showMore = ref(false)

const handleClickSelectDateTime = () => {
  newReservationModel.value.reservationDateTime.value = dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
  newReservationModel.value.reservationDateTime.valid(newReservationModel.value.reservationDateTime.value)
}

const handleClickReset = () => {
  reset()
}

const handleClickSave = () => {
  // 校验表单数据
  if (doValid() === false) return

  //... 保存数据
}

</script>

<style></style>